<template>
    <div>
        <div class="tip">
            <p>急速发布校内的需求</p>
            <span class="tip_font">最快<span style="color:#00BFFF">5分钟</span>内有人接单</span>
        </div>
        <form class="need_form">
            <div class="addr">
                <div><img class="sentimg" src="../../static/img/sent_center/from@2x.png" alt=""></div>
                <div><label>从<big>&nbsp;·</big></label></div>
                <div class="addrinput"><input name="addrfrom" style="border:none;font-size: 15px;width:15.2rem" type="text" placeholder="广州大学华软软件学院红棉楼"></div>
                <div><img class="sentimg" src="../../static/img/sent_center/Places_1@2x.png" alt=""></div>
            </div>
            <div class="addr">
                <div><img class="sentimg" src="../../static/img/sent_center/arrive@2x.png" alt=""></div>
                <div class="fromlab"><label>到<big>&nbsp;·</big></label></div>
                <div class="addrinput"><input name="addrto" style="border:none;font-size: 15px;width:15.2rem" type="text" placeholder="广州大学华软软件学院实验楼"></div>
                <div><img class="sentimg" src="../../static/img/sent_center/Places_2_2x.png" alt=""></div>
            </div>
            <div class="addr">
                <div class="adrrneedtitle"><img class="sentimg" src="../../static/img/sent_center/headline_1@2x.png" alt=""></div>
                <div class="needinput"><input name="needtitle"  style="border:none;font-size: 15px;width:17rem"  type="text" placeholder="需求标目（如拿快递、送书、搬东西）"></div>
            </div>
            
            <div class="addrcostdiv">
                <div class="cost_img"><img class="sentimg" src="../../static/img/sent_center/cost_1@2x.png" alt=""></div>
                <div class="addrinput">
                    <input name="addrcost" style="border:none;width:5rem" type="text" placeholder="100.0">
                </div>
                <div style="padding-right:43px">元</div>
                <div>|</div>
                <div class="adrrthree" style="padding-left:43px"><img class="sentimg" src="../../static/img/sent_center/weight_1@2x.png" alt=""></div>
                <div class="addrinput weight"><input name="addrweight" style="border:none;width:4rem;"  type="text" placeholder="10"></div>
                <div class="kgimg">kg</div>
            </div>
            
            <div class="addrtimetitle">
                <div class="addraptimg"><img class="sentimg" src="../../static/img/sent_center/time_1@2x.png" alt=""></div>
                <div style="padding-left:4px;">预约时间</div>
            </div>

            <div class="addrtime">
                <!-- <div class="addraptimg"><img class="sentimg" src="../../static/img/sent_center/time_1@2x.png" alt=""></div>
                <div style="padding-left:4px;">预约时间：</div> -->
                <div class="arrivetimediv">
                    <input class="arrivetime" name="arrivetimefrom" type="text" placeholder="开始时间" @click="openPicker" value="">
                    <mt-datetime-picker 
                        ref="picker" 
                        type="datetime"  
                        v-model="pickerValue"
                        :startDate="startDate"
                        month-format="{value} 月" 
                        date-format="{value} 日" 
                        hourFormat = "{value} 时"
                        minuteFormat = "{value} 分"
                        @confirm="handleConfirm"></mt-datetime-picker>
                </div>
                <div>到</div>
                <div class="arrivetimediv arrivetimediv2">
                    <input class="arrivetime" name="arrivetimeto" type="text" placeholder="结束时间" @click="openPicker" value="">
                </div>
            </div>

            <div class="addrtextdiv">
                <div class="adrrneedtip"><img class="sentimg" src="../../static/img/sent_center/instructions@2x.png" alt=""></div>
                <div class="mui-input-row" style="margin: 10px 5px;">
					<textarea style="font-size:14px;" id="textarea" rows="5" placeholder="请填写你需求的详细说明"></textarea>
				</div>
            </div>
        
            <div  class="btn_need_div">
                <button class="btn_need" type="submit">发布需求</button>
            </div>
        </form>  
    </div>
</template>

<script>
export default {
      data(){
          return {
              startDate: new Date(),
              starttime:'',
              mytime:'',
          }
      },
    methods: {
      openPicker(event) {
        this.el = event.currentTarget;
        this.$refs.picker.open();
        console.log(this.el);
      },
       handleConfirm(data){
        this.el.value =this.func(data,'YYYY.MM.DD HH:mm');
        console.log(data);
     
      }
    }
  }
</script>


<style>
.divcontent{
    text-align: center;
    align-items: center;
}
.tip{
    height: 70px;
    text-align: center;
    background-color:#FFFFFF;
    align-items: center;
}
.tip p:first-child{
    font-size: 20px;
    padding-top: 9px;
}
.tip_font{
    font-size: 10px;
}
.need_form{
    position: relative;
    background-color: #FFFFFF
}
.addr{
    align-items: center;
    display: flex;
    height: 55px;
    border-top: solid 1px gray;
}
.addrtime{
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    height: 45px;
}
.addrtimetitle{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    border-top: solid 1px gray;
}
.addrcostdiv{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 55px;
    border-top: solid 1px gray;
}
.addrinput{
    padding:15px 5px 0px 0px;
}
.needinput{
    padding:15px 5px 0px 5px;
    width: 20rem;  
}
.adrrthree{
    padding-right: 5px;
}
.adrrneedtitle{
    padding-left: 20px;
    padding-right: 5px;
}
.sentimg{
    width: 20px;
    height: 20px;
}
.cost_img{
    padding-left: 1.3rem;
}
.kgimg{
    padding-right: 1.5rem;
}
.cost{
    width: 5rem;
    display: flex;
    align-items: center;
    text-align: center;
}
.weight{
    width: 4rem;
    display: flex;
    align-items: center;
}
.split{
    padding-left: 50px;
    padding-right:50px;
}
.addraptimg{
    padding-left: 0px;
    padding-right: 8px;
}
.addrarrive{
    padding:15px 5px 0px 5px;
    border:0px;
    width: 9rem;
}
.arrivetimediv{
    padding:15px 5px 0px 0px;
    width: 10rem;
}
.arrivetimediv2{
    padding-left: 5px;
}
.arrivetime{
    font-size: 10px;
    width: 10rem;   
    text-align: center;
}
.addrtextdiv{
    display: flex;
    align-items: flex-start;
    height: 9rem;
    border-top: solid 1px gray;
}
.addrtext{
    height: 8rem;
}
.adrrneedtip{
    padding:10px 5px 0px 0px;
}
#textarea{
    width: 280px;
    height: 120px;;
}
.btn_need_div{
    height: 40px;
    text-align: center;
    background-color: #333436;
}
.btn_need{
    background-color: #333436;
    border: none;
    width: 100%;
    height: 40px;
    color: #FFF;
}
</style>



